{include file="public/head"/}
<link rel="stylesheet" href="__PUBLIC__phone/css/myorder.css"/>
<body>
<!--头部-->
<header id="headers">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <a href="javascript:;" class="leftRuted glyphicon glyphicon-menu-left pull-left" ></a>
                <p>我的订单</p>
            </div>
        </div>
    </div>
</header>
<!-- 我的订单 -->
<div class="myorder normalBox container">
    {volist name="order.data" id="or"}
    <div class="orderlist">
        <table class="table table-bordered">
            <tr >
                <td class="textlefts" colspan="4">
                    <div class="wrsp">
                        <p>下单时间：{$or.addtime}</p>
                        <p>订单号：{$or.order_number}</p>
                    </div>
                </td>
            </tr>
            <tr class="firsttr">
                <td class="textlefts">订单类型</td>
                <td>数量(张)</td>
                <td>合计价格(元)</td>
                <td>订单状态</td>
            </tr>
            {volist name="or.order_info.card" id="oi" key="i"}
            <tr>
                <td>
                    <p>{$oi.total}/{$oi.pkg_kind}套餐</p>
                    <p>{$oi.operator}</p>
                </td>
                <td>
                    <p>{$oi.number}</p>
                </td>
                {if condition="$i eq '1'"}
                <td rowspan="{$or.rowspan}" style="vertical-align:middle;">
                    <p>￥{$or.money}</p>
                    <p> （含运费：￥{$or.freight}）</p>
                </td>
                <td rowspan="{$or.rowspan}" style="vertical-align:middle;"><p data-id="{$or.id}">{$or.status_text}</p></td>
                {/if}
            </tr>
            {/volist}
        </table>
        <div class="btnwrap text-right">
            {if condition="$or['status'] eq '2'"}
            <a href="{:url('/home/Order/payment',['order_number'=>$or['order_number']])}" class="btn btn-default sureorders">确认支付</a>
            <a href="javascript:;" class="btn btn-default" data-id="{$or.id}" id="cancel-order">取消订单</a>
            {/if}
            <a href="{:url('/home/Order/details',['id'=>$or['id']])}" class="btn btn-default">详情</a>
        </div>
    </div>
    {/volist}
</div>
<div class="page">
    <ul id="pageLimit" class="pagination"></ul>
</div>
<!--确认取消订单-->
<div class="modal fade" id="cancelModal">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <!-- 隐藏需要取消订单的id -->
                <input type="hidden" id="cancelHaulId"/>
                <p>您确认要取消订单？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="cancelHaulBtn">确认</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="__PUBLIC__phone/js/bootstrap-paginator.js"></script>
{if condition="$order['last_page'] gt '1'"}
<script>
    $('#pageLimit').bootstrapPaginator({
        currentPage: "<?php echo $order['current_page']; ?>", //当前的请求页面。
        totalPages: "<?php echo $order['last_page']; ?>", //一共多少页。
        size:"small", //应该是页眉的大小。
        bootstrapMajorVersion: 3, //bootstrap的版本要求。
        alignment:"right",
        numberOfPages:3,  //一页列出多少数据。
        itemTexts: function (type, page, current) {   //如下的代码是将页眉显示的中文显示我们自定义的中文。
            switch (type) {
                case "first": return "首页";
                case "prev": return "上一页";
                case "next": return "下一页";
                case "last": return "尾页";
                case "page": return page;
            }
        },
        onPageClicked: function (event, originalEvent, type, page){  //给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
            window.location.href = '/home/Order/index?page='+page;
        }
    });
</script>
{/if}
<script type="text/javascript">
    $(function(){
        // 取消订单确认
        var oId;
        $('.orderlist').on('click','#cancel-order',function(){
            oId = $(this).data('id');
            $("#cancelHaulId").val(oId);
            $("#cancelModal").modal('show');
        })

        // 取消订单
        $('#cancelHaulBtn').on('click',function(data){
            $.post("{:url('/home/Order/cancelOrder')}",{'id':oId},function(data){
                $('#cancelModal').modal('hide');   // 隐藏弹窗
                $('#cancelModal').on('hidden.bs.modal',function(){   // 弹窗完全隐藏之后提示结果
                    reminder(data.msg);
                })
                if(!data.code){
                    $('a[data-id="'+oId+'"]').parent().find('a').not(':last').remove();
                    $('p[data-id="'+oId+'"]').text('已取消');
                }
            });
        })

    })
</script>
</body>
</html>